<template>
  <el-dialog
      :title=title
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      v-dialog-drag
      width="40%">
    <slot name="content"></slot>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleCancelClick">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleOkClick">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "MyDialog",
  props: {
    title: {
      type: String
    },
    message: {
      type: String
    },
    icon: {
      type: String,
      default: "info"
    },
    handleCancel: {
      type: Function
    },
    handleOk: {
      type: Function
    }
  },

  data() {
    return {
      dialogVisible: true,
    }
  },

  methods: {
    handleCancelClick() {
      this.dialogVisible = false;
      this.handleCancel();
    },
    handleOkClick() {
      this.dialogVisible = false;
      this.handleOk();
    },
    handleTestClick() {
      this.$emit('test-click')
    },
  }
}
</script>

<style scoped>
  /deep/.el-dialog__body {
    padding: 15px 20px;
  }

  /deep/ .el-dialog__header {
    padding: 2px 10px 2px;
    background-color: #1E2C3D;
    color: white;
  }
  /deep/ .el-dialog__title {
    color: white;
    font-size: 13px;
    font-family: 微软雅黑,serif;
  }

  /deep/ .el-dialog__headerbtn {
    top: 6px;
  }
  /deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

</style>